<template>
  <div style="background-color:#fff">
    <!-- 通知和搜索 -->
    <div style="background-color:#fff;">
      <van-search placeholder="搜索"
                  @click="$router.push({ name: 'search' })" />
    </div> 
    <!--  -->

    <!-- 新品商品列表   头部3个商品-->
    <div style="padding-left:8px;padding-right:8px;">
      <div style="width:58%;float:left;">  
          <div class="header_image_one" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;margin-bottom:20px;" :style="{backgroundImage: 'url('+ adOne.url +')'}"  @click="navTo(adOne.link)"></div>
      </div>    
      <div style="width:40%;float:left;margin-left:2%;position:relative;height:100%;padding-bottom:58%;">  
              <div class="header_image_two" style="top:0;box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;" :style="{backgroundImage: 'url('+ adTwo.url +')'}" @click="navTo(adTwo.link)"></div>
              <div class="header_image_two" style="bottom:0;box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;" :style="{backgroundImage: 'url('+ adThree.url +')'}" @click="navTo(adThree.link)"></div>
      </div>    
    </div>

    <!-- 新品商品列表      剩余商品 -->
    <div style="background-color:#fff;padding-left:8px;padding-right:8px;">
      <van-row gutter="10" style="margin-left:0;margin-right:0;">
        <van-col span="12"
                 v-for="(newGood ,index) in shopInfos.newGoodsList"
                 :key="index" style="padding:6px" >
          <div
            style="box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;overflow:hidden;position:relative;"
          >
            <router-link :to="{ path: `/items/detail/${newGood.id}`}">
              <div style="width:100%;height:0px;padding-bottom:100%;overflow:hidden;margin:0;">
                 <img v-lazy="newGood.picUrl" style="width:100%;background-color:#fff;" />
              </div>
            </router-link>
            <span class="goods_name"><img :src="factory_outlet_tag" height="14px" style="margin-bottom:-3px;" /> {{newGood.name}}</span>
            <div style="width:100%;height:38px;">
              <span class="goods_price" style="color:red;padding-left:6px;">￥{{newGood.retailPrice}}</span>
              <span class="get_price" >到手价</span><br>
              <span class="couter_price">{{newGood.counterPrice == 0?'':'￥'+newGood.counterPrice}}</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 产品中心 -->
    <div :style="{backgroundImage: 'url('+ newBottom.url +')'}" style="height:91px;text-align:center;background-size:100% 100%;margin-top:20px;" @click="navTo(newBottom.link)">
    </div>
  </div>
</template>

<script>
import { getHome, adList} from '@/api/api';
import hot_tag from '@/assets/images/hot.png';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import bottom_tag from '@/assets/images/bottom_tag.png';
import {
  Row,
  Col,  
  Search,
} from 'vant';

export default {
  name:'new-product',
  
  data() {
    return {
      shopInfos: [],
      adList: [],
      adOne:{},
      adTwo:{},
      adThree:{},
      newBottom:{},
      isLoading: false,
      propsPopup: false,
      hot_tag: hot_tag,
      factory_outlet_tag: factory_outlet_tag,
      bottom_tag: bottom_tag,
    };
  },

  created() {
    this.initViews();
  },

  methods: {
    initViews() {
      adList({position:2}).then(res => {
        this.adList = res.data.data.list;
        this.adOne = this.adList[0];
        this.adTwo = this.adList[1];
        this.adThree = this.adList[2];
      });
      adList({position:6}).then(res => {
        this.newBottom = res.data.data.list[0];
      });
      let type = 'new_product';
      getHome().then(res => {
        this.shopInfos = res.data.data;
      });
    },
    navTo(link){
       this.$router.push({ path: link });
    }
  },
    
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col
  }
}
</script>
<style lang="scss" scoped>
.van-search{
  padding-left:8px;
  padding-right: 8px;
  border-radius:5px;
} 
.van-search /deep/ .van-search__content{
  border-radius:5px;
}
.header_image_one{
  width:100%;
  padding-bottom: 100%;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.header_image_two{
  position:absolute;
  width:100%;
  padding-bottom: 69.5%;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.goods_name {
  padding-left: 6px;
  font-size: 13px;
  height: 25px;
  line-height: 30px;
  font-weight: bold;
  font-family: Arial;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  position: relative;
  color: #323233;
}
.goods_price {
  font-weight: bold;
  padding-left: 6px;
  display: inline-block;
  color: #000;
  height: 14px;
  line-height: 14px;
  text-align: left;
}
.get_price{
  color:red;
  padding:0 4px;
  border:0.2px solid red;
  border-radius:3px;
  font-size:10px;
  display:inline-block;
  margin-left:4px;
  transform: scale(0.8);
  transform-origin: -10px -3px;
}
.couter_price{
  display:inline-block;
  font-size:12px;
  color:#8E8E8E;
  transform: scale(0.8);
  transform-origin: 10px -30px;
  padding-left:8px;
  text-decoration: line-through;
}
</style>